<script>
import {reactive, shallowReactive, ref, shallowRef, readonly, shallowReadonly, onMounted, isProxy, isReactive, isReadonly, isRef, toRaw, toRefs, toRef, unref, computed} from "vue";

export default {
  name: "App",
  setup(props, context) {
    /*
      computed()函数：接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。
    */
    const names = reactive({firstName: "陶", lastName: "品奇"})
    /*
      computed的函数写法
      const fullName = computed(() => {
        return names.firstName + names.lastName
      })
    */

    // computed的对象写法
    let fullName = computed({
      get() {
        return names.firstName + '-' + names.lastName
      },
      set(newValue, oldValue) {
        const newName = newValue.split("-")
        names.firstName = newName[0]
        names.lastName = newName[1]
      }
    })
    console.log(fullName)//ComputedRefImpl
    return {names, fullName}
  }
}
</script>
<template>
  <div id="app">
    姓：<input type="text" v-model="names.firstName">
    名：<input type="text" v-model="names.lastName">
    全名：<input type="text" v-model="fullName">
  </div>
</template>

<style lang="less"></style>
